export default {
  data() {
    return {
      requestAnimationFrameId: 0,
    };
  },
  methods: {
    loop(data, tableData) {
      this[tableData] = [];
      if (this.requestAnimationFrameId) cancelAnimationFrame(this.requestAnimationFrameId);
      return new Promise((resolve, reject) => {
        // 1. 将大数据量分堆
        const twoDArr = this.averageFn(data || []);
        // 2. 定义一个函数，专门用来做赋值渲染（使用二维数组中的每一项）
        const use2DArrItem = (page) => {
          // 4. 从第一项，取到最后一项
          if (page > twoDArr.length - 1) {
            console.log("每一项都获取完了");
            cancelAnimationFrame(this.requestAnimationFrameId);
            return resolve();
          }
          // 5. 使用请求动画帧的方式
          this.requestAnimationFrameId = requestAnimationFrame(() => {
            console.log(this[tableData]);
            // 6. 取出一项，就拼接一项（concat也行）
            this[tableData] = this[tableData].concat(twoDArr[page]);
            // 7. 这一项搞定，继续下一项
            page = page + 1;
            // 8. 直至完毕（递归调用，注意结束条件）
            use2DArrItem(page);
          });
        };
        // 3. 从二维数组中的第一项，第一堆开始获取并渲染（数组的第一项即索引为0）
        use2DArrItem(0);
      });
    },
    averageFn(arr) {
      let i = 0; // 1. 从第0个开始截取
      const result = []; // 2. 定义结果，结果是二维数组
      while (i < arr.length) {
        // 6. 当索引等于或者大于总长度时，即截取完毕
        // 3. 从原始数组的第一项开始遍历
        result.push(arr.slice(i, i + 20)); // 4. 在原有十万条数据上，一次截取20个用于分堆
        i = i + 20; // 5. 这20条数据截取完，再截取下二十条数据，以此类推
      }
      return result; // 7. 最后把结果丢出去即可
    },
  },
};
